@charset "UTF-8";

#account-order {
    /* 订单列表样式 */
    .account-order-types{
        font-size: 0;
        margin-top: 44px;
        &>a{
            margin-right: 24px;
            padding: 0 20px;
            height:40px;
            background: #fff;
            border-radius:20px;
            font-size:14px;
            color: #333333;
            line-height: 40px;
            border: 1px solid #333;
            &.active{
                color: #fff;
                box-shadow: none;
                background-color: #333;
            }
            &:active{
                box-shadow: none;
            }
        }
    }
    #content {
        margin-bottom: 116px;
    }
    .account-order-content{
        .review{
            min-width: 120px;
        }
        .operation{
            min-width: 190px;
        }
    }
    .order-lists {
        margin-top: 42px;
        border-color: transparent;
        thead {
            height:40px;
            background:rgba(246,246,246,1);
            opacity:1;
            td {
                font-size: 14px;
                font-weight: bold;
                border: none;
            }

        }
        tbody {
            tr {
                font-size: 14px;
                &:not(.blank-tr) {
                    & > td {
                        padding-top: 20px;
                        padding-bottom: 20px;
                        &.order-price {
                            font-weight: bold;
                        }
                        &:not(:first-child) {
                            border-left: none;
                        }
                        & > p {
                            margin-bottom: 8px;
                            color: #333;
                            &.order-detail-view,
                            &.order-express-view {
                                a {
                                    font-size: 14px;
                                    color: #333;
                                    &:hover {
                                        color: $brand-primary;
                                    }
                                }
                            }
                        }
                        .order-btn {
                            &.sign-btn {
                                vertical-align: top;
                                display: inline-block;
                                padding: 0 20px;
                                height: 40px;
                                line-height: 40px;
                                color: #333;
                                border: 1px solid rgba(219, 219, 219, 1);
                                background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(230, 230, 230, 1) 100%);
                            }
                            &.pay-now {
                                display: inline-block;
                                padding: 10px 12px;
                                font-size: 14px;
                                color: #fff;
                                background-color: $brand-primary;
                                transition: opacity .3s 0s ease;
                                &:hover {
                                    opacity: .8;
                                }
                            }
                        }
                        .cancel-btn {
                            margin-top: 8px;
                            & > a {
                                color: #333;
                            }
                        }
                    }
                }
            }
        }
    }
    /*没有订单*/
    .no-items {
        & > img {
            width: 162px;
            height: 162px;
        }
        span {
            margin-top: 14px;
            font-size: 18px;
        }
    }
    //用于作为表格行之间的间距
    .blank-tr {
        height: 14px;
    }
    /* 订单详情页面样式 */
    &.order-detail {

        .account-order-content{
            margin-top: 34px;
        }
        #content {
            margin-bottom: 0;
            & > h2 {
                padding-left: 14px;
                padding-bottom: 11px;
                border-bottom: 1px solid $border-color;
            }
            table {
                /* 订单的顶部信息 */
                &.first-order-info {
                    tbody {
                        td {
                            line-height: 25px;
                            padding: 16px 14px;
                            font-size: 14px;
                            background-color: #F6F6F6;
                            border: none;
                            &.blank-td {
                                min-width: 16px;
                                background-color: #fff;
                            }
                        }
                    }
                }
                /* 订单详细信息 */
                &.order-detail-info {
                    td {
                        font-size: 14px;
                        vertical-align: middle;
                        .order-status {
                            color: #9D9D9D;
                        }
                        &.count-td {
                            min-width: 50px;
                        }
                        &.product-td {
                            padding: 17px 24px;
                        }

                        .review.btn,
                        .return-btn {
                            vertical-align: top;
                            display: inline-block;
                            padding: 0 20px;
                            height: 40px;
                            line-height: 40px;
                            color: #333;
                            border:1px solid rgba(219,219,219,1);
                            background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
                        }
                        .buy-again-btn{
                            vertical-align: top;
                            display: inline-block;
                            padding: 0 10px;
                            height: 40px;
                            line-height: 36px;
                            border:1px solid rgba(219,219,219,1);
                            background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(230,230,230,1) 100%);
                            &>img{
                                width: 22px;
                                height: 22px;
                            }
                        }

                    }
                    thead {
                        height: 44px;
                        td {
                            font-weight: bold;
                        }
                    }
                    .product-info {
                        display: flex;
                        max-width: 320px;
                        .product-image {
                            max-width: 80px;
                            min-width: 80px;
                            height: 80px;
                            margin-right: 12px;
                            font-size: 0;
                            overflow: hidden;
                            border: 1px solid $border-color;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .product-text-info {
                            text-align: left;
                            a{
                                color: #333333;
                                &:hover{
                                    color: $brand-primary;
                                }
                            }
                        }
                    }
                }
            }
            & > .order-status {
                width: 100%;
                height: 32px;
                padding: 6px 14px;
                margin-bottom: 9px;
                background-color: #F6F6F6;
                font-size: 14px;
            }
            .order-price {
                margin-bottom: 130px;
                list-style: none;
                font-size: 16px;
                font-weight: normal;
                & > li {
                    &:not(:last-child) {
                        margin-bottom: 14px;
                    }
                    .total-price {
                        font-size: 22px;
                        font-weight: bold;
                        color: #333;
                    }
                }
            }
        }
    }
}

#review-modal{
    .modal-dialog{
        width: 780px !important;
    }
}

#photo-modal{
    .modal-dialog{
        width: 800px !important;
        & >img{
            width: 100%;
        }
    }
}

.order-info-modal{

    // 评价上传图片相关样式
    .images {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        & > div {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            &.single-image {
                .close-btn {
                    position: absolute;
                    right: -6px;
                    top: -7px;
                    font-size: 15px;
                    opacity: .7;
                    &:hover {
                        opacity: 1;
                    }
                }
                &:hover {
                    .mask {
                        display: block;
                    }
                }
                .mask {
                    display: none;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    text-align: center;
                    line-height: 3.5;
                    color: #9d9d9d;
                    font-size: 20px;
                    background-color: rgba(0,0,0,.6);
                    i {
                        transition: color .3s 0s ease;
                        cursor: pointer;
                        &:hover {
                            color: #fff;
                        }
                    }
                }
                & > i {
                    position: absolute;
                    right: -6px;
                    top: -6px;
                    font-size: 16px;
                    cursor: pointer;
                    transition: transform .3s 0s ease;
                    &:hover {
                        transform: scale(1.2);
                    }
                }
            }
            img {
                width: 70px;
                height: 70px;
                cursor: pointer;
            }
        }
        .upload-btn {
            display: inline-block;
            width: 70px;
            height: 70px;
            border: 1px solid #333;
            font-size: 40px;
            cursor: pointer;
            margin: 0;
            font-weight: normal;
        }
    }
    #upload_files {
        display: none;
    }

    textarea{
        width: 100%;
        height: 170px;
        margin-top: 5px;
        &:focus{
            outline: none;
            border-color: $brand-secondary;
        }
    }
    .score{
        vertical-align: middle;
        height:21px;
        font-size:16px;
        line-height:21px;
        margin-bottom: 10px;
        cursor: pointer;
        &>i{
            color: #E6E6E6;
        }
        &>i.selected{
            color: #F8CF91;
        }
    }
    .modal-body{
        padding: 20px 25px 14px;
    }
    .modal-footer{
        border-top: none;
        padding-top: 16px;
        padding-bottom: 32px;
    }
}